<template>
    <div class="login">
        <van-nav-bar :title="$t('my.login_password')" leftArrow @click-left="_return"/>
        <div class="loginMain home">
            <van-tabs v-model="active" class="tab">
                <van-tab :title="$t('my.phone_certify')"></van-tab>
                <van-tab :title="$t('my.email_certify')"></van-tab>
            </van-tabs>
            <div class="press" v-if="active === 0">
                <van-field v-model="phone.val" type="tel" :label="$t('my.phone')" :placeholder="$t('common.phone_remind')" />
                <van-field v-model="phone.code" :label="$t('common.code')" :placeholder="$t('common.code_remind')"><p slot="button" @click="sendPhoneCode">{{sec}}</p></van-field>
                <van-field v-model="phone.pwd" type="password" :label="$t('my.new_login')" :placeholder="$t('my.login_remind')" />
            </div>
            <div class="press" v-if="active === 1">
                <van-field v-model="mail.val" type="tel" :label="$t('my.email')" :placeholder="$t('common.email_remind')" />
                <van-field v-model="mail.code" :label="$t('common.code')" :placeholder="$t('common.code_remind')"><p slot="button" @click="sendMailCode">{{mailSec}}</p></van-field>
                <van-field v-model="mail.pwd" type="password" :label="$t('my.new_login')" :placeholder="$t('my.login_remind')" />
            </div>
            <button class="btn" @click="fixPwd">{{$t('common.confirm')}}</button>
            <loading v-if="loadingShow"></loading>
        </div>
    </div>
</template>

<script>
    import {mapMutations,mapGetters} from 'vuex'
    export default {
        data() {
            return {
                active:0,
                phone:{
                    val:'',
                    code:'',
                    pwd:''
                },
                mail:{
                    val:'',
                    code:'',
                    pwd:''
                },
                loadingShow:false,
                disBtn:false,
                sec:this.$t('common.get_code'),
                timer:null,
                disMailBtn:false,
                mailSec:this.$t('common.get_code'),
                mailTimer:null,
            }
        },
        methods: {
            _return(){
                Object.keys(this.phone).map(key => this.phone[key] = '')
                Object.keys(this.mail).map(key => this.mail[key] = '')
                this.$emit('_return')
            },
            sendPhoneCode(){
                if(!this.phone.val){
                    this.$toast(this.$t('common.phone_remind'))
                    return
                }
                if(this.disBtn){
                    return false
                }else{
                    const TIME_COUNT = 60;
                    let param = {
                        type:2,
                        phone:this.phone.val
                    }
                    this.loadingShow = true
                    this.$api.post('user/sendCode',param,this)
                        .then(res =>{
                            this.loadingShow = false
                            this.disBtn = true
                            this.$toast(res.message)
                            if(!this.timer){
                                this.sec = TIME_COUNT
                                this.timer = setInterval(()=>{
                                    if(this.sec>0 && this.sec<= TIME_COUNT){
                                        this.sec--
                                    }else{
                                        this.sec = this.$t('common.get_code')
                                        clearInterval(this.timer)
                                        this.timer = null
                                        this.disBtn = false
                                    }
                                },1000)
                            }
                        })
                }
            },
            sendMailCode(){
                if(!this.mail.val){
                    this.$toast(this.$t('email_regsiter.email_remind'))
                    return
                }
                if(this.disMailBtn){
                    return false
                }else{
                    const TIME_COUNT = 60;
                    let param = {
                        email:this.mail.val,
                        type:2
                    }
                    this.loadingShow = true
                    this.$api.post('user/sendMail',param,this)
                        .then(res =>{
                            this.loadingShow = false
                            this.disMailBtn = true
                            this.$toast(res.message)
                            if(!this.mailTimer){
                                this.mailSec = TIME_COUNT
                                this.mailTimer = setInterval(()=>{
                                    if(this.mailSec>0 && this.mailSec<= TIME_COUNT){
                                        this.mailSec--
                                    }else{
                                        this.mailSec = this.$t('common.get_code')
                                        clearInterval(this.mailTimer)
                                        this.mailTimer = null
                                        this.disMailBtn = false
                                    }
                                },1000)
                            }
                        })
                }
            },
            fixPwd(){
                this.active ? this.fixMailPwd() : this.fixPhonePwd()
            },
            fixPhonePwd(){
                if(!this.phone.val){
                    this.$toast(this.$t('common.phone_remind'))
                    return
                }
                if(!this.phone.code){
                    this.$toast(this.$t('mobil_regsiter.code_remind'))
                    return
                }
                if(!this.phone.pwd){
                    this.$toast(this.$t('common.password_remind'))
                    return
                }
                let param = {
                    type:1,
                    phone:this.phone.val,
                    password:this.phone.pwd,
                    code:this.phone.code
                }
                this.$api.post('user/editPass',param)
                    .then(res =>{
                        this.$toast(res.message)
                        localStorage.removeItem('user')
                        localStorage.removeItem('token')
                        this.$router.push('/login')
                        this._return()
                    })
            },
            fixMailPwd(){
                if(!this.mail.val){
                    this.$toast(this.$t('common.phone_remind'))
                    return
                }
                if(!this.mail.code){
                    this.$toast(this.$t('mobil_regsiter.code_remind'))
                    return
                }
                if(!this.mail.pwd){
                    this.$toast(this.$t('common.password_remind'))
                    return
                }
                let param = {
                    type:2,
                    email:this.mail.val,
                    password:this.mail.pwd,
                    code:this.mail.code
                }
                this.$api.post('user/editPass',param)
                    .then(res =>{
                        this.$toast(res.message)
                        localStorage.removeItem('user')
                        localStorage.removeItem('token')
                        this.$router.push('/login')
                        this._return()
                    })
            }
        },
        created() {

        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .van-cell:not(:last-child)::after
        border none
    .loginMain
        width 94%
        margin 0 auto
        .press
            padding 5px
            //background white
            border-radius 5px
            .van-cell
                //background white!important
                color font
                .van-field__button p
                    color font
            .van-cell:not(:last-child)
                border-bottom 1px solid rgba(255,255,255,.1)

        .btn
            margin-top 10px
            color #000
            height 40px

</style>